<template>
  <div class="vehicle-details-wrap">
    <TopFilter ref="searchOrdersPanel" :list="searchOrdersList" :cols="3" :label-width="120" @filterChange="getGuaranteedRemindTable" @onCollapse="collapseHandle" />
    <ButtonArea :style="{ paddingLeft: '0px' }">
      <!-- <el-button type="primary" @click="openRepairhistory">维修历史</el-button>
      <el-button type="primary" @click="openRepairImport">维修建议</el-button>
      <el-button type="primary" @click="openComplaint">投诉历史</el-button>
      <el-button type="primary">导 出</el-button> -->
      <!-- <el-button type="primary">任务分派</el-button> -->
      <!-- <el-button type="primary">短信发送</el-button> -->
      <el-button type="primary" @click="openComplaint">转投诉</el-button>
      <el-button type="primary" @click="openPrecontract">预约安排</el-button>
      <el-button type="primary" @click="openRemindInputs">提醒录入</el-button>
      <el-button size="small" type="primary" icon="el-icon-download" :loading="exportLoading" @click="exportData()">导出</el-button>
      <!-- <el-button type="primary" @click="openRemindHistory">提醒历史</el-button> -->
    </ButtonArea>
    <!--  :loading="addBtnState" -->
    <FilterTable
      ref="table"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      selectionType="single"
      :datakey="'rows'"
      :onColumnsChange="columns => (this.columns = columns)"
      :onRowSelectChange="cell => (this.onSelectCell = cell)"
    >
      <template slot="controls">
        <!-- <el-button @click="openPayments" type="primary" >收 款</el-button> -->
      </template>
    </FilterTable>
    <!-- 提醒历史 -->
    <Drawer :visible.sync="showRemindHistory" title="提醒历史" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <RemindHistory :vin="chooseVin" :ownerNo="chooseOwnerNo" :remindSource="2" @close="closeRemindHistory" />
      <div
        :style="{
          position: 'absolute',
          left: 0,
          bottom: 0,
          right: 0,
          zIndex: 9999,
          borderTop: '1px solid #e9e9e9',
          padding: '10px 20px',
          background: '#fff',
          textAlign: 'right'
        }"
      >
        <el-button @click="closeRemindHistory">返 回</el-button>
      </div>
    </Drawer>
    <Drawer :visible.sync="showPrecontract" title="预约安排" width="1350" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <Precontract ref="Precontract" :Vin="chooseVin" :License="chooseLicense" :cancelFlag="1" @close="closePrecontract" />
      <div
        :style="{
          position: 'absolute',
          left: 0,
          bottom: 0,
          right: 0,
          zIndex: 9999,
          borderTop: '1px solid #e9e9e9',
          padding: '10px 20px',
          background: '#fff',
          textAlign: 'right'
        }"
      >
        <el-button @click="closePrecontract">返 回</el-button>
      </div>
    </Drawer>
    <Drawer :visible.sync="showRemindInputs" title="提醒录入" width="800" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <RemindInputs ref="RemindInputs" :type="handleType" :remindData="selectData" :remindSource="2" @close="closeRemindInputs" />
    </Drawer>
    <Drawer :visible.sync="showComplaint" title="转投诉" width="1300" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <Complaint ref="Complaint" :vin="chooseVin" @close="closeComplaint" />
      <div
        :style="{
          position: 'absolute',
          left: 0,
          bottom: 0,
          right: 0,
          zIndex: 9999,
          borderTop: '1px solid #e9e9e9',
          padding: '10px 20px',
          background: '#fff',
          textAlign: 'right'
        }"
      >
        <el-button @click="closeComplaint">返 回</el-button>
      </div>
    </Drawer>
    <Drawer :visible.sync="showRepairhistory" title="维修历史" width="1300" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <Repairhistory ref="Repairhistory" :getdata="onSelectCell[0]" @close="closeRepairhistory" />
    </Drawer>
    <Drawer :visible.sync="showRepairImport" title="维修建议" width="1300" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <!-- <RepairImport ref="RepairImport" :vin="chooseVin" @cancel="closeRepairImport" /> -->
    </Drawer>
  </div>
</template>

<script>
import _ from 'lodash';
import moment from 'moment';
import { dictionary } from '@/utils/dictMixin';
import { getPinpSelect, getExtendWarrantyRemindTable, getUserListSelect, YBexport1, YBexport2, YBexport3 } from '@/api/customerRepair/customerCare/extendWarrantyRemind/index';
import { searchRoleByCode } from '@/api/common/empSelect/index';
import dictCode from '@/utils/dictCode';
import { jsonToHump } from '@/utils/index';
import { exportExcelFile, arrayObjDeWeight } from '@/utils/index';
import RemindHistory from '@/pages/customerRepair/customerCare/vehicleRemind/components/remindHistory.vue';
import Precontract from '@/pages/repair/repairReception/precontractArrange';
import RemindInputs from '@/pages/customerRepair/customerCare/extendWarrantyRemind/extendWarrantyEdit.vue';
// import Complaint from '@/pages/repair/business/customer/combination/complaint';
import Complaint from '@/pages/customerRepair/customerComplaint/customerComplaintReception';
import Repairhistory from '@/pages/repair/business/customer/Repairhistory/historypop.vue';
// import RepairImport from '@/pages/repair/repairReception/customer/repairImport/Modal.vue';
import { getBrand, getSeries, getModel, getRegion } from '@/api/customerRepair/customerCare/insuranceDueRemind/index';
import { getDealerUser } from '@/api/part/partInventory/partInventory/index.js';
export default {
  name: 'ActivitiesInvite',
  components: {
    RemindHistory,
    // Reservation,
    RemindInputs,
    Complaint,
    Repairhistory,
    // RepairImport,
    Precontract
  },
  mixins: [dictionary],
  data() {
    // this.dmsFunc = { dmsFuncId: 55100010 };
    this.guarRemindDateBegin = ''; // 质保日期开始时间
    this.guarRemindDateEnd = ''; // 质保日期结束时间
    return {
      searchOrdersList: this.createSearchOrdersList(),
      columns: this.createTableColumns(),
      exportLoading: false, // 导出加载中
      fetchParams: { xhrAbort: false },
      fetchApi: getExtendWarrantyRemindTable,
      onSelectCell: [],
      showRemindHistory: false,
      // showReservation: false,
      showPrecontract: false,
      showRemindInputs: false,
      showComplaint: false,
      showRepairhistory: false,
      showRepairImport: false,
      chooseVin: null,
      chooseLicense: null,
      chooseOwnerNo: null,
      selectData: null,
      handleType: ''
    };
  },
  computed: {},
  watch: {},
  mounted() {
    this.getUserListSelect();
    this.getDealerUser();
    // this.getPiznpSelect(); //获取品牌
    this.serviceConsultant(); // 获取服务顾问
    this.queryBrand();
    this.querySeries();
    this.queryModel();
    this.queryRegion();
  },
  methods: {
    createSearchOrdersList() {
      return [
        {
          type: 'INPUT',
          label: '车主名称',
          fieldName: 'ownerName'
        },
        {
          type: 'INPUT',
          label: '车牌号',
          fieldName: 'vhlPlate'
        },
        {
          type: 'RANGE_DATE',
          label: '延保日期',
          fieldName: 'guarRemindFromDate|guarRemindToDate',
          dateType: 'exactdaterange'
        },
        {
          type: 'INPUT',
          label: '车主编号',
          fieldName: 'ownerNo'
        },
        {
          type: 'INPUT',
          label: '车主手机',
          fieldName: 'telphone'
        }
      ];
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        // {
        // title: '操作',
        // dataIndex: 'column-action',
        // width: 140,
        // fixed: 'left',
        // render: props => {
        //   return (
        //     <div>
        //     <el-button size="mini" type="text" onClick={() => this.exhale(props.row, '0')}>
        //   智能外呼
        //   </el-button>
        //   <el-button size="mini" type="text" onClick={() => this.exhale(props.row, '00')}>
        //   加0外呼
        //   </el-button>
        //   </div>
        // );
        // }
        // },
        {
          title: '车主编号',
          dataIndex: 'ownerNo',
          showOverflowTooltip: true,
          sorter: true
        },
        {
          title: '车主名称',
          dataIndex: 'cusName',
          showOverflowTooltip: true,
          sorter: true
        },
        {
          title: '车主电话',
          dataIndex: 'phone',
          showOverflowTooltip: true,
          sorter: true
        },
        {
          title: '车主手机',
          dataIndex: 'mobile',
          showOverflowTooltip: true,
          sorter: true
        },

        {
          title: '联系人',
          dataIndex: 'linkMan',
          showOverflowTooltip: true,
          sorter: true
        },
        {
          title: '联系人电话',
          dataIndex: 'telphone',
          showOverflowTooltip: true,
          sorter: true
        },
        {
          title: '联系人手机',
          dataIndex: 'linkPhone',
          showOverflowTooltip: true,
          sorter: true
        },
        {
          title: '品牌',
          dataIndex: 'brand',
          sorter: true,
          editable: false,
          editType: 'select',
          editItems: []
        },
        {
          title: '车型',
          dataIndex: 'model',
          width: 100,
          sorter: true,
          editable: false,
          editType: 'select',
          editItems: []
        },
        {
          title: '购车日期',
          dataIndex: 'purchaseDate',
          sorter: true,
          dateFormat: 'yyyy-MM-dd'
        },
        {
          title: '车牌号',
          dataIndex: 'vhlPlate',
          sorter: true
        },
        {
          title: 'VIN',
          dataIndex: 'vin',
          width: 150,
          sorter: true
        },
        {
          title: '行驶里程',
          dataIndex: 'mileage',
          width: 150,
          sorter: true
        },
        {
          title: '车龄',
          dataIndex: 'age',
          width: 150,
          sorter: true,
          render: props => {
            return <span>{parseInt(props.row.age / 12) + '年' + (props.row.age % 12) + '月'}</span>;
          }
        },
        {
          title: '上次维修日期',
          dataIndex: 'lastRepairDate',
          sorter: true,
          dateFormat: 'yyyy-MM-dd'
        },

        {
          title: '上次保养日期',
          dataIndex: 'lastMaintainDate',
          sorter: true,
          dateFormat: 'yyyy-MM-dd'
        },
        {
          title: '质保到期日',
          dataIndex: 'expirationWarranty',
          sorter: true,
          dateFormat: 'yyyy-MM-dd'
        },
        {
          title: '延保里程',
          dataIndex: 'extendddWarrantyMileage',
          width: 150,
          sorter: true
        },
        {
          title: '延保到期日',
          dataIndex: 'extendddWarrantyDate',
          sorter: true,
          dateFormat: 'yyyy-MM-dd'
        }
      ];
    },
    collapseHandle() {
      this.$nextTick(() => {
        this.$refs.table.$refs.pageTable.EXECUTE_RESET_HEIGHT();
      });
    },
    getGuaranteedRemindTable(val) {
      // 将提交的form表单数据克隆出一份
      let valClone = _.cloneDeep(val);
      valClone.guarRemindDateFrom = this.guarRemindDateBegin;
      valClone.guarRemindDateTo = this.guarRemindDateEnd;
      console.log(valClone, '搜索条件');
      this.fetchParams = Object.assign({}, valClone);
    },
    async getPinpSelect() {
      const res = await getPinpSelect();
      // console.log(res,'品牌')
      this.searchOrdersList.find(item => item.fieldName === 'brand').itemList = res.data.map(x => ({ value: x.brandId, text: x.brandName })); //
    },
    async serviceConsultant() {
      let roleParam = { role: dictCode.SERVICE_CONSULTANT };
      const res = await searchRoleByCode(roleParam);
      // console.log(res, '服务顾问');
      this.searchOrdersList.find(item => item.fieldName === 'lastConsultantId').itemList = res.data.map(x => ({ text: x.employeeName, value: x.userId }));
    },
    openRemindHistory(data) {
      if (this.onSelectCell.length == 1) {
        this.saveData(this.onSelectCell);
        this.showRemindHistory = true;
      } else {
        this.$notify.error({ title: '提示信息', message: '请选择一条表格数据！' });
      }
    },
    closeRemindHistory(data) {
      this.showRemindHistory = false;
    },
    // openReservation(data) {
    //   if (this.onSelectCell.length == 1) {
    //     this.saveData(this.onSelectCell)
    //     this.showReservation = true;
    //   } else {
    //     this.$notify.error({ title: '提示信息', message: '请选择一条表格数据！' });
    //   }
    // },
    // closeReservation(data) {
    //   this.showReservation = false;
    // },
    openPrecontract(data) {
      if (this.onSelectCell.length == 1) {
        this.saveData(this.onSelectCell);
        this.showPrecontract = true;
      } else {
        this.$notify.error({ title: '提示信息', message: '请选择一条表格数据！' });
      }
    },
    closePrecontract(data) {
      this.showPrecontract = false;
    },
    openRemindInputs(data) {
      if (this.onSelectCell.length == 1) {
        this.selectData = _.cloneDeep(this.onSelectCell[0]);
        this.handleType = 'add';
        // jsonToHump(this.selectData);
        // console.log(this.selectData)
        this.showRemindInputs = true;
      } else {
        this.$notify.error({ title: '提示信息', message: '请选择一条表格数据！' });
      }
    },
    closeRemindInputs(data) {
      this.showRemindInputs = false;
      if (data == 'refresh') {
        // 重新加载
        this.fetchParams = { ...this.fetchParams };
      }
    },
    openComplaint(data) {
      if (this.onSelectCell.length == 1) {
        this.saveData(this.onSelectCell);
        this.showComplaint = true;
      } else {
        this.$notify.error({ title: '提示信息', message: '请选择一条表格数据！' });
      }
    },
    closeComplaint(data) {
      this.showComplaint = false;
    },
    openRepairhistory(data) {
      if (this.onSelectCell.length == 1) {
        this.saveData(this.onSelectCell);
        this.showRepairhistory = true;
      } else {
        this.$notify.error({ title: '提示信息', message: '请选择一条表格数据！' });
      }
    },
    closeRepairhistory(data) {
      this.showRepairhistory = false;
    },
    openRepairImport(data) {
      if (this.onSelectCell.length == 1) {
        this.saveData(this.onSelectCell);
        this.showRepairImport = true;
      } else {
        this.$notify.error({ title: '提示信息', message: '请选择一条表格数据！' });
      }
    },
    closeRepairImport(data) {
      this.showRepairImport = false;
    },
    exhale(val, a) {
      let phone = a + val.cusPhone;
      let userData = {
        userData: {
          ownerNo: val.ownerNo,
          OWNER_CODE: val.ownerCode,
          OWNER_NAME: val.cusName,
          date: moment(new Date()).format('YYYY-MM-DD hh:MM:SS')
        }
      };
      if (CallCenter.isLogin()) {
        CallCenter.callout(phone, null, null, null, null, userData);
        this.ownerNo = val.ownerNo;
      } else {
        this.$notify.warning({ title: '提示信息', message: '没有外呼权限!' });
      }
    },
    saveData(val) {
      this.chooseVin = val[0].VIN;
      this.chooseLicense = val[0].LICENSE;
      this.chooseOwnerNo = val[0].OWNER_NO;
    },
    // 查询所有品牌(供table使用)
    async queryBrand() {
      const res = await getBrand();
      this.columns.find(x => x.dataIndex === 'brand').editItems = res.data.map(x => ({ text: x.BRAND_NAME, value: x.BRAND_ID + '' }));
    },
    // 查询所有车系(供table使用)
    async querySeries() {
      const res = await getSeries();
      this.columns.find(x => x.dataIndex === 'SERIES').editItems = res.data.map(x => ({ text: x.SERIES_NAME, value: x.SERIES_ID + '' }));
    },
    // 查询所有车型(供table使用)
    async queryModel() {
      const res = await getModel();
      this.columns.find(x => x.dataIndex === 'model').editItems = res.data.map(x => ({ text: x.MODEL_NAME, value: x.MODEL_ID + '' }));
    },
    // 查询省市(供table使用)
    async queryRegion() {
      const res = await getRegion();
      let list = res.data.map(x => ({ text: x.REGION_NAME, value: x.REGION_ID }));
      this.columns.find(x => x.dataIndex === 'PROVINCE').editItems = list;
      this.columns.find(x => x.dataIndex === 'CITY').editItems = list;
    },
    // 获取提醒人
    async getDealerUser() {
      const res = await getDealerUser();
      this.columns.find(x => x.dataIndex === 'REMINDER').editItems = res.data.map(x => ({ value: x.userId.toString(), text: x.employeeName }));
    },
    exportData() {
      this.exportLoading = true;
      YBexport1(this.fetchParams).then(res => {
        exportExcelFile(res, '延保提醒导出');
      });
      this.exportLoading = false;
    },
    // 获取服务顾问下拉框
    async getUserListSelect() {
      const res = await getUserListSelect();
      this.columns.find(x => x.dataIndex === 'SERVICE_ADVISOR').editItems = res.data.map(x => ({ value: x.userId.toString(), text: x.employeeName }));
      this.columns.find(x => x.dataIndex === 'LAST_CONSULTANT_ID').editItems = res.data.map(x => ({ value: x.userId.toString(), text: x.employeeName }));
      this.columns.find(x => x.dataIndex === 'MAINTAIN_ADVISOR').editItems = res.data.map(x => ({ value: x.userId.toString(), text: x.employeeName }));
      this.columns.find(x => x.dataIndex === 'INSURANCE_ADVISOR').editItems = res.data.map(x => ({ value: x.userId.toString(), text: x.employeeName }));
    }
  }
};
</script>

<style lang="less"></style>
